<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0060)http://203.162.17.98/weblh/suutam/2002/vovisoft/msnet/10.htm -->
<HTML><HEAD><TITLE>Bài 10</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="Le Hoan" name=Author>
<META content="MSHTML 5.50.4134.100" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<META 
content="computer, software, games, vietnam, viet nam, tin hoc, le hoan, pclehoan, ktlehoan, vietnamese, download, saigon, freeware, lehoanpc, mailing list, may tinh, phan cung, phan mem, kien thuc, hop thu, internet, weblh, unicode, Forum, chat, diendan, dien dan" 
name=keywords>
<META 
content="Pho bien kien thuc, huong dan su dung phan cung, phan mem may tinh, game. Download software free. Link website Vietnam, forum, chat, mailing list..." 
name=description></HEAD>
<BODY>
<CENTER>
<P><A href="http://www.vovisoft.com/"><IMG height=77 alt="Logo of Vovisoft" 
src="10_files/vs-logo4_10.gif" width=102 border=0> </A><FONT face=Tahoma></P>
<H2><FONT face=Tahoma color=#800000>Bài 10</FONT></H2>
<H2><FONT face=Tahoma color=#800000>Những chức năng mới trong giao diện cửa sổ 
của VB.NET (phần III)</FONT></H2></CENTER></FONT><FONT face=Arial>
<BLOCKQUOTE>
  <BLOCKQUOTE>
    <H3><FONT color=green size=2>Tự động Resize và định chỗ 
    (positioning)</FONT></H3>
    <P><FONT size=2>Những chương trình ứng dụng chuyên nghiệp ta mua ngoài chợ 
    để dùng thường thường có đặc tính resize các controls hay định vị trí của 
    các controls trên form một cách tự động. Nếu bao giờ bạn đã thử thêm các 
    chức năng ấy cho một chương trình áp dụng viết bằng VB6 của mình, bạn sẽ 
    thông cảm rằng coi vậy chớ đó không phải là chuyện nhỏ. <BR><BR>Tưởng tượng 
    là ta phải ghi nhớ vị trí và kích thước của mỗi control trên form để mỗi lần 
    user resizes form thì ta phải theo đó resize và định vị trí của control. 
    Trong lúc thiết kế ta phải cho user một phương tiện để chỉ định rằng họ muốn 
    một control cư xử như thế nào khi form resize. Để chứa tin tức ấy hoặc ta 
    dùng property Tag của control hoặc ta dùng registry. Chỉ việc đọc ra, viết 
    vào để cập nhật hoá các tin tức cũng đủ mệt, chưa nói đến chuyện tính toán 
    để resize và định vị trí của control. Do đó, nhiều khi làm biếng ta dùng đại 
    một third party ActiveX để giúp ta làm các chuyện ấy.<BR><BR>.NET cho ta 
    thêm các <B>properties Anchor và Dock</B> cho mỗi control. Ngoài ra .NET còn 
    cung cấp control <B>Splitter</B> để cho phép ta nắm một thanh phân hai kéo 
    qua, kéo lại hay kéo lên, kéo xuống tùy thích, để mở rộng thêm một bên trong 
    khi bên kia bị thu hẹp.<BR><BR>Cái áp dụng của Splitter thông dụng nhất là 
    trong Windows Explorer. Trong đó ta có hai phần: bên trái là một Treeview 
    chứa cái cây của disk drives và file folders, bên phải là một Listview chứa 
    icons hay chi tiết của các folder và files. Muốn xem Treeview nhiều hơn, ta 
    nắm thanh phân hai ở giữa kéo qua bên phải một chút.<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=365 src="10_files/WExplorer.gif" 
      width=727></FONT></P></BLOCKQUOTE>
    <H3><FONT color=blue size=2>Anchoring (bỏ neo)</FONT></H3>
    <P><FONT size=2>Khi con tàu bỏ neo là nó đỗ ở đó. Dù con nước chảy thế nào, 
    con tàu vẫn nằm yên một chỗ vì nó đã được cột vào cái neo. Control trong 
    .NET có property <B>Anchor</B> để ta chỉ định nó được buộc vào góc nào của 
    form: <B>Left, Right, Bottom</B> hay <B>Top</B>. <BR><BR>Trong lúc thiết kế, 
    sau khi select cái control (thí dụ Button1), ta vào cửa sỗ Properties và 
    click hình tam giác nhỏ bên phải property Anchor. Một hình vuông với bốn 
    thanh ráp lại giống hình chữ thập màu trắng sẽ hiện ra. Mỗi thanh tượng 
    trưng cho một góc mà ta có thể chỉ định để cột control vào form. Khi ta 
    click một thanh, nó sẽ đổi màu thành xám đậm, và một chữ tương ứng với thanh 
    ấy sau nầy sẽ hiển thị trong textbox area của combobox Anchor.<BR><BR>Thí dụ 
    ta click vào thanh dưới và hai thanh hai bên, ta sẽ có <B>Bottom, Left, 
    Right</B> như trong hình dưới đây:<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=447 src="10_files/Anchor1.gif" 
      width=623></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Khi Button1 có Anchor là Bottom, Right thì mỗi khi góc phải 
    dưới của form di chuyển vì resize, Button1 cứ chạy theo góc 
    ấy:<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=176 src="10_files/AnchorBR.gif" 
      width=494></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Nếu Button1 có Anchor là Left, Right, Bottom thì khi form 
    resizes cho lớn ra, Button1 cứ giữ khoảng cách từ nó đến ba cạnh Left, 
    Right, Bottom của form không đổi. Do đó nó phải nở rộng ra như trong hình 
    dưới đây:<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=165 src="10_files/AnchorBLR.gif" 
      width=380></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Nếu Button1 có Anchor là Top,Bottom,Left, Right thì khi form 
    resizes, Button1 cứ giữ khoảng cách từ nó đến bốn cạnh Left, Right, Top, 
    Bottom của form không đổi. Do đó nó phải nở rộng hay thu nhỏ cả chiều cao 
    lẫn chiều rộng như trong hình dưới đây:<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=242 src="10_files/AnchorTBLR.gif" 
      width=352></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Vì property Anchor có hiệu lực lập tức ngay trong lúc ta 
    thiết kế, nên nếu bạn resize form trong lúc thiết kế, các control có Anchor 
    property set cũng resize và di chuyển theo. Có thể bạn không muốn chuyện đó 
    xãy ra, nên tốt nhất là set property Anchor của các control sau khi thiết kế 
    form xong hết rồi.<BR></FONT></P>
    <H3><FONT color=blue size=2>Docking (gắn vào)</FONT></H3>
    <P><FONT size=2>Khi ta <B>Dock</B> một control vào một cạnh của form có 
    nghĩa là ta dán dính nó vào cạnh đó. Áp dụng ta thường thấy nhất của Docking 
    là ToolBar và StatusBar. ToolBar thì dock vào phía trên của form, còm 
    StatusBar thì dock vào phía dưới của một form. Chúng dãn ra chiếm từ trái 
    qua phải của form, user không thể chỉ định chiều rộng của chúng. Khi form 
    được resized thì ToolBar và StatusBar cũng dãn ra hay co vào theo chiều rộng 
    của form.<BR><BR>Property Dock của control trong .NET cũng giống giống như 
    <B>property Align</B> của control trong VB6 StatusBar.<BR><BR>Ta chỉ có thể 
    dán một control vào một trong bốn cạnh của form, chớ không có chuyện bắt cá 
    hai, ba tay như trường hợp Anchor có thể neo vào Left, Right, Bottom cùng 
    một lúc. Tuy nhiên, property Dock có trị số <B>Fill</B> để nói control chiếm 
    hết bên trong phần còn lại của container của nó.<BR><BR>Trong lúc thiết kế, 
    sau khi select cái control (thí dụ Label1), ta vào cửa sỗ Properties và 
    click hình tam giác nhỏ bên phải property Dock. Một hình vuông nhiều thanh 
    màu xám sẽ hiện ra. Mỗi thanh tượng trưng cho một cạnh mà ta có thể chỉ định 
    để dán control vào form (<B>Top, Bottom, Left</B> hay <B>Right</B>), cái 
    hình vuông ở giữa tượng trưng cho trị số <B>Fill</B>, và thanh dưới chót có 
    chữ <B>None</B> cho phép ta xóa không chọn trị số Dock nào cả.. Khi ta click 
    một thanh, trị số Docking tương ứng sẽ hiển thị trong textbox area của 
    combobox Dock.<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=463 src="10_files/Docking.gif" 
      width=595></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Giả sử ta set <B>Property TextAlign</B> của Label là 
    <B>MiddleCenter</B> bằng cách chọn cái thanh xám nằm ngay giữa trong số 9 
    thanh tượng trưng cho các vị trí của Text có thể nằm trong Label1 như trong 
    hình dưới đây:<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=351 src="10_files/TextAlign.gif" 
      width=596></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Khi chạy chương trình và resize form cho lớn ra, ta sẽ thấy 
    Label1 dãn ra hai bên, nhưng không hề tăng bề cao, và Text của Label1 luôn 
    luôn nằm ở giữa. </FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=185 src="10_files/DockTop.gif" 
      width=520></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Nếu bạn tìm cách dock nhiều controls vào cùng một cạnh của 
    form thì VB.NET phải quyết định control nào nằm sát cạnh ấy nhất. Qui ước về 
    thứ tự là ngược lại với thứ tự trong z-order. Tức là trong z-order, control 
    nào nằm dưới nhất thì lại được dock trước nhất vào cạnh của form. Do đó, nếu 
    bạn dock hai controls vào một cạnh, và muốn cái control nằm xa cạnh được 
    dock trước nhất (tức là sát cạnh nhất) thì right click control ấy và chọn 
    <B>Send To Back</B>.<BR><BR>Nếu bạn muốn chừa một khoảng trống giữa control 
    và cạnh của container thì set <B>Property DockPadding</B> của container. Tự 
    trước đến giờ ta dùng form để đại diện container chứa controls. Thật ra 
    container cũng có thể là một <B>Panel</B>. Bạn có thể set Property 
    DockPadding của các cạnh của container khác nhau bằng cách click dấu 
    <B>+</B> bên trái chữ DockPadding trong cửa sổ Properties để mở ra các chi 
    tiết như trong hình dưới đây:<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=295 src="10_files/DockPadding.gif" 
      width=606></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Bạn có thể set tất cả Property DockPadding cùng một trị số 
    bằng cách dùng <B>All</B> setting. </FONT></P>
    <H3><FONT color=blue size=2>Control Splitter</FONT></H3>
    <P><FONT size=2>Bây giờ bạn đã hiểu rõ các đặc tính, sự khác biệt và cách 
    dùng hai properties Anchor và Dock của control, sau đây ta sẽ áp dụng kiến 
    thức ấy vào việc thiết kế dùng Splitter trong một form. Nếu còn mới với 
    Splitter bạn sẽ dễ bị bực mình khi dùng nó. Do đó, bạn hãy thử làm theo các 
    bước sau đây:<BR><BR></FONT></P>
    <OL>
      <LI><FONT size=2>Tạo một Application mới, đặt một Panel lên phía trái của 
      form chính để nó chíếm bên trái của form bằng cách set property Dock của 
      nó thành Left. Ta gọi Panel ấy là Panel1. </FONT>
      <LI><FONT size=2>Đặt một Splitter lên form (nhớ tránh đặt nó lên Panel1 vì 
      Panel cũng là một loại container nên có thể chứa Splitter được). Splitter 
      sẽ tự động dock Left vào form tức là nằm bên phải Panel1. Chọn <B>property 
      BoderStyle</B> của Splitter1 làm <B>FixedSingle</B> cho dễ thấy. </FONT>
      <LI><FONT size=2>Đặt một button lên Panel1 và set property Anchor của nó 
      thành Top, Left, Right. Bây giờ form sẽ giống như dưới đây:<BR><BR><IMG 
      height=374 src="10_files/SplitterDemo1.gif" width=792> </FONT>
      <LI><FONT size=2>Kế đó, đặt một Panel lên bên phải của form, gọi là 
      Panel2, và set property Dock nó thành Fill. Có nghĩa là ta muốn Panel2 
      chiếm hết phần còn lại bên phải của form. </FONT>
      <LI><FONT size=2>Thêm vào trong Panel2 nầy một Button, gọi là Button2, và 
      set property Anchor của nó thành Top, Left, Right. </FONT></LI></OL>
    <P><FONT size=2>Khi chạy chương trình, mỗi lần bạn nắm Splitter kéo qua phải 
    thì Button1 dãn ra và Button2 co lại: <BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=336 src="10_files/SplitterDemo2.gif" 
      width=488></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Ngược lại, nếu bạn nắm Splitter kéo qua trái thì Button1 co 
    ra và Button2 dãn lại:<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=336 src="10_files/SplitterDemo3.gif" 
      width=488></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Trong thí dụ nầy ta để yên chiều rộng của Splitter, nhưng 
    bình thường ta làm cho nó hẹp hơn. Nếu Splitter hẹp thì khó thấy, do đó bạn 
    có thể cho nó một màu đỏ rực trong lúc thiết kế để dễ thấy. Khi thiết kế 
    xong hết rồi, bạn đổi nó lại thành một màu dịu hơn. <BR><BR>Nếu bây giờ bạn 
    muốn chia Panel2 thành hai phần, ngăn cách bởi một Horizontal Splitter thì 
    sao? Ta cứ xem Panel2 như một form vậy, tức là cả hai đều là containers, 
    loại control có thể đựng nhiều controls, và lập lại các bước sau: 
</FONT></P>
    <OL>
      <LI><FONT size=2>Đặt một Panel lên phía trên của Panel2, gọi nó là Panel3 
      và set property Dock của nó thành Top. </FONT>
      <LI><FONT size=2>Đặt một Splitter lên Panel2 (nhớ tránh đặt nó lên 
      Panel3), gọi nó là Splitter2 và set property Dock của nó cũng thành Top. 
      Resize Splitter2 cho nó dẹp lại và đổi <B>property Backcolor</B> thành ra 
      <B>ControlDark</B> cho dễ thấy. </FONT>
      <LI><FONT size=2>Đặt một Panel lên phía dưới của Panel2, gọi nó là Panel4 
      và dời Button2 từ Panel2 qua Panel4 bằng cách Cut and Paste. </FONT>
      <LI><FONT size=2>Set property Dock của Panel4 thành Fill. </FONT></LI></OL>
    <P><FONT size=2>Bây giờ hãy chạy chương trình và nắm kéo Splitter2 lên 
    xuống.<BR><BR></FONT></P>
    <BLOCKQUOTE>
      <P><FONT size=2><IMG height=336 src="10_files/TwoSplitters.gif" 
      width=488></FONT></P></BLOCKQUOTE>
    <P><FONT size=2>Tóm lại, muốn dùng control Splitter trong một form hay panel 
    ta đặt một PanelX với Docking Left hay Top lên trước, kế đó đặt một Splitter 
    với cùng loại Docking với PanelX, rồi đặt PanelY với Docking 
    Fill.<BR><BR>Bạn có thể <A 
    href="http://www.vovisoft.com/dotNET/Bai10/Splitter.zip">tải về chương trình 
    Splitter nầy</A> tại đây. </FONT></P></FONT><!-- Start of bottom bar for copyright notice etc -->
    <TABLE class=clsNavLinks id=tblFooterLinks cellSpacing=0 cellPadding=0 
    width="100%" border=0>
      <TBODY>
      <TR>
        <TD class=clsRaised width=785 bgColor=#6699cc colSpan=5>
          <P align=center><FONT face=Arial color=#ffffff size=2>Vovisoft © 2000. 
          All rights reserved.</FONT></P></TD></TR>
      <TR>
        <TD width=256>
          <P align=center><FONT face=Arial size=2>&nbsp;&nbsp; Last Updated: <!--webbot 
      bot="Timestamp" S-Type="REGENERATED" S-Format="%d %b %Y" startspan -->12 
          th3 2002<!--webbot 
      bot="Timestamp" endspan i-checksum="13293" --> </FONT></P></TD>
        <TD width=181><FONT face=Arial size=2>&nbsp;</FONT></TD>
        <TD width=258>
          <P align=center><FONT face=Arial size=2><A 
          href="mailto:dixon@vovisoft.com">Webmaster</A></FONT></P></TD></TR></TBODY></TABLE></BLOCKQUOTE></BLOCKQUOTE>
<HR>

<P align=center><FONT face="Times New Roman"><B><FONT color=#ff0000>PcLeHoan 
1996 - 2002</FONT><FONT face=.VnTime size=2><BR></FONT></B></FONT><FONT 
face="Times New Roman" size=2><B>Mirror </B>: <A 
href="http://www.pclehoan.com/andi/ndc.htm">http://www.pclehoan.com/andi/ndc.htm</A><BR><B>Mirror 
</B>: <A 
href="http://www.lehoanpc.net/andi/ndc.htm">http://www.lehoanpc.net/andi/ndc.htm</A></FONT><BR><FONT 
face="Times New Roman" size=2><B>Mirror </B>: <A 
href="http://www.ktlehoan.com/">http://www.ktlehoan.com/</A></FONT></P>
<P align=center><A target=_top 
href="http://member.bcentral.com/cgi-bin/fc/fastcounter-login?2828564"><IMG 
src="10_files/digits.gif" border=0></A> </P></BODY></HTML>
